<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>购物车-24-1.5K</title>
     <!-- 需要引入的css -->
     <link rel="stylesheet" href="../lib/fontawesome/css/font-awesome.css">
     <link rel="stylesheet" href="../lib/mui/css/mui.css">
     <!-- 项目的公共的样式文件 scss  -->
     <link rel="stylesheet" href="../css/common.css">
     <!-- 自己页面的样式文件 scss -->
     <link rel="stylesheet" href="../css/cart.css">

</head>

<body id="cart_body" >
     <!-- 头部 -->
     <header class="mui-bar mui-bar-nav">
          <h1 class="mui-title">购物车</h1>
          <!-- mui-action-back -->
          <button class="delete_btn mui-btn-outlined  mui-btn mui-btn-blue mui-btn-nav mui-pull-left">删除</button>
          <button class="edit_btn mui-btn-outlined mui-btn mui-btn-blue  mui-pull-right">编辑</button>
     </header>
     <!-- 内容 -->
     <div class="pyg_view">
          <!-- 配送地址 -->
          <div class="address">
               <!-- 标题 -->
               <div class="addr_title item_title ">配送地址</div>
               <!-- 内容 -->
               <div class="addr_content">
                    <!-- 左侧 -->
                    <div class="addr_icon">
                         <span class="fa fa-map-marker"></span>
                    </div>
                    <!-- 右侧 -->
                    <div class="addr_right">
                         <div class="addr_name1">默认地址</div>
                         <div class="addr_name2">中国台湾钓鱼岛</div>

                    </div>
               </div>
          </div>
          <!-- 总价 -->
          <div class="price_row">
               <div class="price_title item_title">总价</div>
               <div class="price_content mui-clearfix">
                    <!-- 左侧 -->
                    <div class="price_left">
                         总价: <div class="total_price_wrap">
                              <span>￥</span>
                              <span class="total_price">0000</span>
                         </div>
                    </div>
                    <a href="javascript:;" class="price_right  order_create_btn">生成订单</a>
               </div>
          </div>
          <!-- 订单 -->
          <div class="order_row">
               <div class="order_title item_title">订单</div>
               <div class="order_content">
                    <ul class="order_wrap">
                       
                       
                    </ul>
               </div>
          </div>
     </div>

     <footer class="pyg_footer">
          <a href="javascript:;">
               <span class="fa fa-home"></span>
               <div>首页</div>
          </a>
          <a href="pages/category.html">
               <span class="fa fa-list-ul"></span>
               <div>分类</div>
          </a>
          <a href="javascript:;">
               <span class="fa fa-cart-plus"></span>
               <div>购物车</div>
          </a>
          <a href="javascript:;">
               <span class="fa fa-user"></span>
               <div>我的</div>
          </a>
     </footer>

</body>


<!-- 模板引擎 -->
<script type="text/html" id="mainTpl">
{{each obj val key}}
<li data-obj='{{val}}'>
          <!-- 复选框 -->
          <div class="goods_chk_wrap">
               <div class="mui-input-row mui-checkbox">
                    <input class="inp_chk" type="checkbox">
               </div>
          </div>
          <!-- 图片 -->
          <div class="goods_img_wrap">
               <img src="{{val.goods_small_logo}}"
                    alt="">
          </div>
          <!-- 商品的信息 -->
          <div class="goods_info_wrap">
               <!-- mui-ellipsis-2 -->
               <div class="goods_name ">{{val.goods_name}} </div>
               <div class="goods_num_tool">
                    <div class="mui-numbox"  data-numbox-step='1' data-numbox-min='1' data-numbox-max='{{val.goods_number}}'>
                         <!-- "-"按钮，点击可减小当前数值 -->
                         <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                         <input class=" amount_new mui-numbox-input" type="number" value="{{val.amount}}" />
                         <!-- "+"按钮，点击可增大当前数值 -->
                         <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                    </div>
               </div>
               <div class="goods_item_price">￥{{val.goods_price}} </div>
          </div>
     </li>
{{/each}}
</script>
<!-- 模板引擎 -->

<!-- js -->
<script src="../lib/mui/js/mui.js"></script>
<!-- zepto 是我 自己定制过的！！！ 里面包含了一些常用的模块！！ 直接当做jq来使用！！！  -->
<script src="../lib/zepto/zepto.js"></script>
<script src="../lib/arttemplate/template-web.js"></script>
<!-- iscroll -->
<script src="../lib/iscroll/iscroll.js"></script>
<!-- 公共 js -->
<script src="../js/common.js"></script>
<!-- 自己 js -->
<script src="../js/cart.js"></script>

</html>